<!-- 货盘筛选弹框 -->
<template>
		<view>
			<scroll-view :scroll-y="true" style="padding-top: 30rpx;background-color: white;max-height: 50vh;">
				<!-- 走播还是寄播 -->
				<view class="padding_all" style="font-size: 24rpx;color: #8D9090;">货盘类型</view>
				<view class="flex_row wrap padding_all">
					<view v-for="item,index in delivers" :key="index">
						<view @click="click_deliver(item,index)"
							:class="deliver_index == index ? 'selected flex center' :'unselected  flex center'">{{item}}</view>
					</view>
				</view>
				<!-- 风格 -->
				<view style="height: 40rpx;"></view>
				<view class="padding_all full_width" style="font-size: 24rpx;color: #8D9090;">选择风格</view>
				<view class="flex_row wrap padding_all" style="justify-content: flex-start;">
					<view v-for="item,index in pallet_style" :key="index">
						<view @click="click_style(item,index)"
							:class="item_selected(item) ? 'selected single_line' :'unselected single_line'">{{item}}</view>
					</view>
				</view>
				<view style="height: 40rpx;"/>
				<!-- 选择价格带 -->
				<view class="padding_all" style="font-size: 24rpx;color: #8D9090;">选择价格带</view>
				<view class="flex_row baseline padding_all" style="margin-left:20 ;margin-right: 40rpx;">
					<view style="font-size:16rpx;color: black;">¥</view>
					<view style="font-size:22rpx;color: black;">{{min}}</view>
					<view class="flex"/>
					<view style="font-size: 16rpx;color: black;">¥</view>
					<view style="font-size:22rpx;color: black;">{{max}}</view>
				</view>
				<view class="full_width padding_all">
					<range_slider :width="slideWidth" :height="slideHeight" :blockSize="slideBlockSize" :min="minValue" :max="maxValue"
						:values="rangeValues" @rangechange="onRangeChange">
						<!-- <view slot="minBlock" class="range-slider-block">1</view>
						<view slot="maxBlock" class="range-slider-block">2</view> -->
					</range_slider>
				</view>
				<view style="height: 162rpx;"/>
				
				<view style="height: 18rpx;"/>
			</scroll-view>
			<view style="height:116rpx;box-shadow: 0 -4rpx 8rpx 0 #EAEAEA;padding-top: 18rpx;bottom:0;padding: 0 21rpx;margin-top: 10rpx;" class="flex_row center fixed background_white">
				<fl_btn @click="reselect" text="重置" height="80rpx" width="200rpx" :primary="true"/>
				<view style="width: 40rpx;"/>
				<fl_btn @click="confirm" text="确认筛选" height="80rpx" width="468rpx" :primary="false"/>
			</view>
		</view>
</template>

<script>
	import range_slider from "../range_slider.vue"
	import store from "../../utils/store.js"
	import fl_btn from "../fl_btn.vue"
	import {remove} from "../../utils/utils.js"
	export default {
		name: "pallet_filter_dialog",
		components: {
			fl_btn,
			range_slider,
		},
		computed: {
			pallet_style() {
				console.log("Style====>")
				if(store.state.palletStyle != null)return store.state.palletStyle.tags
				return []
				// console.log(store.state.palletStyle)
				// return store.state.palletStyle.tags
			}
		},
		data() {
			return {
				delivers: [
					"寄播",
					"走播"
				],
				deliver_index: -1,
				styles: new Set(),
				minValue: 0,
				maxValue: 2000,
				rangeValues: [0, 2000],
				slideWidth: 702,
				slideHeight: 80,
				slideBlockSize: 56,
				slideMin: 0,
				slideMax: 2000,
				min:0,
				max:2000,
				
			};
		},
		props: {

		},
		methods: {
			item_selected(item){
				var set = new Set()
				set.contains
				return this.styles.has(item)
			},
			reselect(){
				console.log("重置")
				this.styles = new Set()
				this.style_index = []
				this.deliver_index = -1
				this.min = 0
				this.max = 2000
				this.rangeValues = [0,2000]
			},
			confirm(){ 			//确认筛选
				console.log("确认筛选")
				let deliver = this.deliver_index == -1 ? null : this.delivers[this.deliver_index]
				let tag = this.style_index == -1 ? '' : this.pallet_style[this.style_index]
				let result = {
					deliver:deliver,
					tag:this.styles,
					min_price:this.min,
					max_price:this.max,
				}
				this.$emit("confirm",result)
			},
			click_deliver(item, index) {
				this.deliver_index = index
			},
			click_style(item, index) {
				if(this.styles.has(item)){
					this.styles.delete(item)
				}else{
					this.styles.add(item)
				}
				this.styles = new Set(this.styles)
			},
			
			onRangeChange: function(e) {
				this.min = parseInt(e.minValue)
				this.max = parseInt(e.maxValue)
				this.rangeValues = [Math.round(e.minValue), Math.round(e.maxValue)];

				console.log(this.rangeValues);
			},
		}
	}
</script>

<style lang="scss">
	.selected {
		margin-top: 12rpx;
		margin-right: 12rpx;
		height: 72rpx;
		width: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #CCF3F3;
		font-size: 26rpx;
		color: #00C2C4;
	}

	.unselected {
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
		height: 72rpx;
		width: 160rpx;
		background-color: #F5F5F5;
		font-size: 26rpx;
		color: #161E22;
	}
	.padding_all{
		padding: 0 24rpx;
	}
</style>
